<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <base href="http://localhost:8080/json_ajax/">
    <title>Insert title here</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            // $("#ajaxBtn").click(function () {
            // 	$.ajax({
            // 		url: "AjaxServlet",
            // 		data: "action=jQueryAjax",
            // 		type: "GET",
            // 		success: function (data) {
            // 			let person = JSON.parse(data);
            // 			$("#msg").html(`编号：${person.id}，姓名：${person.name}`);
            // 		},
            // 		dataType: "text"
            // 	});
            //     return false;
            // });
            $("#ajaxBtn").click(function () {
                $.ajax({
                    url: "AjaxServlet",
                    data: "action=jQueryAjax",
                    // data: {action: "jQueryAjax"},
                    type: "GET",
                    success: function (person) {
                        $("#msg").html(`ajax 编号：${person.id}，姓名：${person.name}`);
                    },
                    dataType: "json"
                });
                return false;
            });

            $("#getBtn").click(function () {
                $.get(
                    "AjaxServlet",
                    "action=jQueryGet",
                    function (person) {
                        $("#msg").html(`get 编号：${person.id}，姓名：${person.name}`);
                    },
                    "json"
                );
                return false;
            });

			$("#postBtn").click(function () {
				$.post(
						"AjaxServlet",
						"action=jQueryPost",
						function (person) {
							$("#msg").html(`post 编号：${person.id}，姓名：${person.name}`);
						},
						"json"
				);
				return false;
			});

			$("#getJSONBtn").click(function () {
			    $.getJSON(
						"AjaxServlet",
						"action=jQueryGetJSON",
						function (person) {
							$("#msg").html(`getJSON 编号：${person.id}，姓名：${person.name}`);
						}
				)
			    return false;
			});
			
			$("#submit").click(function () {
			    $.getJSON(
			            "AjaxServlet",
			            "action=jQuerySerialize&" + $("#form01").serialize(),
			            function (person) {
							$("#msg").html(`getJSON 编号：${person.id}，姓名：${person.name}`);
			            }
			    )
			    return false;
			});
        });
    </script>
</head>
<body>
<div>
    <button id="ajaxBtn">$.ajax请求</button>
    <button id="getBtn">$.get请求</button>
    <button id="postBtn">$.post请求</button>
    <button id="getJSONBtn">$.getJSON请求</button>
</div>
<div id="msg">

</div>

<br/><br/>
<form id="form01">
    用户名：<input name="username" type="text"/><br/>
    密码：<input name="password" type="password"/><br/>
    下拉单选：<select name="single">
    <option value="Single">Single</option>
    <option value="Single2">Single2</option>
</select><br/>
    下拉多选：
    <select name="multiple" multiple="multiple">
        <option selected="selected" value="Multiple">Multiple</option>
        <option value="Multiple2">Multiple2</option>
        <option selected="selected" value="Multiple3">Multiple3</option>
    </select><br/>
    复选：
    <input type="checkbox" name="check" value="check1"/> check1
    <input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
    单选：
    <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
    <input type="radio" name="radio" value="radio2"/> radio2<br/>
</form>
<button id="submit">提交--serialize()</button>
</body>
</html>